<template>
  <div class="box">
      <!-- 登陆框 -->
    <div class="loginFrame">
      <!-- 登陆图片 -->
      <div class="imgBox">
        <img src="~@/assets/img/loginImg.webp" alt="">
      </div>
      <!-- form表单 -->
      <el-form label-width="0" class="formBox" :model="form" :rules="rules" ref="ruleForm">
        <el-form-item prop="username">
          <el-input v-model="form.username" prefix-icon="iconfont icon-denglu1"></el-input>
        </el-form-item>
        <el-form-item prop="password" class="passwordBox">
          <el-input v-model="form.password" :type="isShow?'password':''" prefix-icon="iconfont icon-mima"></el-input>
          <div class="eyes" @click="passwordShow">
            <img src="~@/assets/img/eyes1.svg" alt="">
          </div>
        </el-form-item>
      <!-- 登录按钮 -->
        <div class="loginButton">
          <el-button type="primary" plain  @click="submitForm">登录</el-button>
          <el-button type="info" plain @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {LoginData} from '@/request/api'
export default {
  name:'Login',
  data() {
      return {
        //控制密码加密
        isShow:true,
        checked: true,
        form: {
          username: 'admin',
          password: '123456'
        },
        // 表单验证规则
        rules:{
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods:{
      //点击是否隐藏密码
      passwordShow(){
        this.isShow = !this.isShow
      },
      //重置按钮
      resetForm() {
        this.$refs.ruleForm.resetFields();
      },
      //登录按钮
      submitForm(){
        let {password,username} = this.form
        this.$refs.ruleForm.validate((valid) => {
          if (!valid) return
          LoginData({
            username,
            password
          }).then(res=>{
            if(res.meta.status==200){
              this.$message.success('登陆成功')
              sessionStorage.setItem('token',res.data.token)
              this.$router.push('/home')
            }else{
              this.$message.error('登陆失败')
              return
            }
          })
        })
      }
    }
}
</script>

<style lang="less" scoped>
  .box{
    height: 100%;
    background-color: #2b4b6b;
    .loginFrame{
      width: 450px;
      height: 300px;
      background-color: #fff;
      position: absolute;left: 50%;top: 50%;
      transform: translate(-50%,-50%);
      border-radius: 5px;
      .imgBox{
        width: 120px;
        height: 120px;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-50%);
        padding: 6px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 5px #fff;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .formBox{
        position: absolute;
        bottom: 0;left: 0;right: 0;
        padding: 0 20px;
        .loginButton{
          margin-bottom: 22px;
          display: flex;
          justify-content: flex-end;
        }
        .passwordBox{
          .el-input{
            position: relative;
          }
          .eyes{
            position: absolute;top: 0;right: 0;bottom: 0;
            width: 25px;
            display: flex;justify-content: center;align-items:center;
            img{
              width: 60%;
              height: 60%;
              opacity: .4;
              &:hover{
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
</style>